<template>
    <setting-pane :show="showStatus">
        <template v-if="currentSetting.type === 'modulePage'">
            <module-page-setting-pane :type="currentSetting.name" :element="modulePageConfig" />
        </template>
        <template v-else-if="currentSetting.type === 'custom'">
            <custom-setting-pane :type="currentSetting.name" />
        </template>
        <template v-else-if="currentSetting.type === 'widget'">
            <widget-setting-pane :widget="widget" />
        </template>
    </setting-pane>
</template>

<script>
import { defineComponent, ref, computed, watch } from 'vue'
import { useEditStore } from '@/store'
import useWidget from '@/libs/edit/widgetData'
import SettingPane from '@/components/setting-pane'
import WidgetSettingPane from './components/widget-setting/widget-setting-pane'
import CustomSettingPane from './components/custom-setting/custom-setting-pane'
import ModulePageSettingPane from './components/module-page-setting/module-page-setting-pane'
import { onSetSettingTypeEvent } from './events'
export default defineComponent({
    name: 'EditSettingPane',
    components: {
        SettingPane,
        // 控件设置面板
        WidgetSettingPane,
        // 自定义设置面板
        CustomSettingPane,
        // 模块页面设置面板
        ModulePageSettingPane
    },
    setup() {
        const editStore = useEditStore()

        const {
            widgetListFlat,
            selectWidgetIds,
            onSelectWidget
        } = useWidget()

        const customSettingType = ref('')

        const pageId = computed(() => editStore.pageId)
        const pageType = computed(() => editStore.pageType)

        const widget = computed(() => widgetListFlat.value?.[selectWidgetIds.value[0]])
        const widgetType = computed(() => selectWidgetIds.value.length === 1 ? widget.value?.widgetData?.eles?.type : '')

        const modulePageConfig = computed(() => editStore.modulePageConfig)

        const currentSetting = computed(() => {
            if (pageId.value && pageType.value === 3) {
                return {
                    type: 'modulePage',
                    name: pageId.value
                }
            } else if (!!customSettingType.value) {
                return {
                    type: 'custom',
                    name: customSettingType.value
                }
            } else if (!!widgetType.value && selectWidgetIds.value.length === 1) {
                return {
                    type: 'widget',
                    name: widgetType.value
                }
            }
            return {
                type: '',
                name: ''
            }
        })
        const showStatus = computed(() => !!currentSetting.value.name)

        watch(
            () => widgetType.value,
            (newValue) => {
                if (newValue) customSettingType.value = ''
            }
        )

        onSetSettingTypeEvent(name => {
            customSettingType.value = name
            onSelectWidget([])
        })
        
        return {
            widget,
            widgetType,
            modulePageConfig,
            currentSetting,
            showStatus
        }
    }
})
</script>